<template>
  <FormItem :label="`${itemData.label}：`" :prop="propName">
    <template v-if="itemData.type === 'inputRange'">
      <Row>
        <Col span="10">
          <FormItem :label-for="itemData.valueArr[0].name">
            <div class="qw-form-txt" v-if="itemData.readonly">
              {{ formData[itemData.valueArr[0].name] }}
            </div>
            <Input
              v-else
              v-model="formData[itemData.valueArr[0].name]"
              :type="itemData.inputType"
              :maxlength="itemData.maxLen ? itemData.maxLen : 50"
              :show-word-limit="
                itemData.showWordLimit ? itemData.showWordLimit : true
              "
              :placeholder="itemData.valueArr[0].placeholder"
              :element-id="itemData.valueArr[0].name"
              @on-change="handleInputChange"
              @on-blur="handleInputBlur"
            >
              <span
                v-if="
                  itemData.valueArr[0].prepend &&
                  itemData.valueArr[0].prepend !== ''
                "
                slot="prepend"
                >{{ itemData.valueArr[0].prepend }}</span
              >
              <span
                v-if="
                  itemData.valueArr[0].append &&
                  itemData.valueArr[0].append !== ''
                "
                slot="append"
                >{{ itemData.valueArr[0].append }}</span
              >
            </Input>
          </FormItem>
        </Col>
        <Col span="4" class="qw-text-c">-</Col>
        <Col span="10">
          <FormItem
            :prop="itemData.valueArr[1].name"
            :label-for="itemData.valueArr[1].name"
          >
            <div class="qw-form-txt" v-if="itemData.readonly">
              {{ formData[itemData.valueArr[1].name] }}
            </div>
            <Input
              v-else
              v-model="formData[itemData.valueArr[1].name]"
              :type="itemData.inputType"
              :maxlength="itemData.maxLen ? itemData.maxLen : 50"
              :show-word-limit="
                itemData.showWordLimit ? itemData.showWordLimit : true
              "
              :placeholder="itemData.valueArr[1].placeholder"
              :element-id="itemData.valueArr[1].name"
              @on-change="handleInputChange"
              @on-blur="handleInputBlur"
            >
              <span
                v-if="
                  itemData.valueArr[1].prepend &&
                  itemData.valueArr[1].prepend !== ''
                "
                slot="prepend"
                >{{ itemData.valueArr[1].prepend }}</span
              >
              <span
                v-if="
                  itemData.valueArr[1].append &&
                  itemData.valueArr[1].append !== ''
                "
                slot="append"
                >{{ itemData.valueArr[1].append }}</span
              >
            </Input>
          </FormItem>
        </Col>
      </Row>
    </template>
    <template v-else-if="itemData.type === 'input'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt" v-if="itemData.readonly">
          {{ formData[itemData.name] }}
        </div>
        <Input
          v-else
          v-model="formData[itemData.name]"
          :type="itemData.inputType ? itemData.inputType : 'text'"
          :maxlength="itemData.maxLen ? itemData.maxLen : 50"
          :show-word-limit="
            itemData.showWordLimit ? itemData.showWordLimit : true
          "
          :placeholder="itemData.placeholder"
          :disabled="itemData.disabled ? itemData.disabled : false"
          @on-change="handleInputChange"
          @on-blur="handleInputBlur"
        />
        <p style="color: red" v-if="isUse">分类名称已存在，请重新输入！</p>
      </FormItem>
    </template>
    <template v-else-if="itemData.type === 'textarea'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt" v-if="itemData.readonly">
          {{ formData[itemData.name] }}
        </div>
        <Input
          v-else
          v-model="formData[itemData.name]"
          :type="itemData.inputType"
          :maxlength="itemData.maxLen ? itemData.maxLen : 100"
          :show-word-limit="
            itemData.showWordLimit ? itemData.showWordLimit : true
          "
          :placeholder="itemData.placeholder"
          @on-change="handleInputChange"
          @on-blur="handleInputBlur"
        />
      </FormItem>
    </template>
  </FormItem>
</template>
<script>
import { ApiRequest } from '@api/basePage';
export default {
  components: { ApiRequest },
  props: {
    itemData: {
      type: Object
    },
    formData: {
      type: Object
    }
  },
  data () {
    return {
      propName: '', // 校验规则名称
      dataList: [],
      uuid: '', // 用于校验分类名称传参
      isUse: false // 是否使用
    };
  },
  created () {
    this.uuid = this.$route.query.uuid;
    if (this.itemData.type === 'inputRange') {
      this.propName = this.itemData.valueArr[0].name;
    } else {
      this.propName = this.itemData.name;
    }
  },
  methods: {
    handleInputBlur (event) {
      if (this.formData.categoryName) {
        let data = {
          categoryName: this.formData.categoryName,
          uuid: this.uuid ? this.uuid : "'1'"
        };

        // 开始请求会员信息
        ApiRequest(
          '/sysback/template/producttemplatecategory/checkCategoryName',
          'post',
          data,
          true
        ).then(res => {
          if (res.retStatus === '1') {
            if (res.retData === 'true') {
              this.isUse = false;
              window.localStorage.setItem('isUse', this.isUse);
            } else if (res.retData === 'false') {
              this.isUse = true;
              this.formData.name = '';
              window.localStorage.setItem('isUse', this.isUse);
            } else {
            }
          } else {
          }
        });
      }
    },
    handleInputChange (event) {
      this.$emit('handleChangeFormData', this.formData);
    }
  }
};
</script>
